<template>
  <div class="warp">
    <div class="title">
      送恋人/爱情鲜花
    </div>
    <div class="flower">
      <van-card
      @click="clickItem(item.id, index)"
      v-for="(item, index) in items"
      :key="item.id"
        :price="item.minPrice"
        :desc="item.characteristic? 'item.characteristic': '暂无描述'"
        :title="item.name"
        :thumb="item.pic"
      >
      <template #footer>
        <van-icon @click.stop="enterCart(item.id, index)" size="20" color="red" name="shopping-cart" />
      </template>
    </van-card>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true
    }
  },
  methods: {
    enterCart (id, index) {
      this.$emit('clickCart', { id, index })
    },
    clickItem (id, index) {
      this.$emit('clickitem', { id, index })
    }
  }
}
</script>

<style lang="scss" scoped>
.warp{
  .title{
    line-height: 50px;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
  }
  .flower{
    /deep/.van-card{
      padding: 12px 16px;
      .van-card__thumb {
      height: 100px;
      margin-right: 26px;
      }
      .van-card__price{
        color: red;
        font-size: 16px;
      }
      .van-card__title{
        margin-bottom: 5px;
        font-size: 14px;
        color: #000;
      }
      .van-card__header{
        margin-top: 5px;
      }
    }
  }
}
</style>
